<template>
  <div>
    <steps :active-step="activeStep" :steps="steps" />
    <div v-if="activeStep===0">
      <div v-loading="dataLoading" element-loading-text="加载中">
        <div class="qup-title-box"><span class="border" /><span>设计变更基础信息</span></div>
        <el-form
          ref="refForm"
          style="margin-top:20px"
          :rules="formRules"
          :model="changeBaseData"
          size="mini"
          label-width="150px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店建设项目号:" prop="constCode">
                {{ changeBaseData.constCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--由门店自动带出 -->
              <el-form-item label="所属门店 :" prop="shopName">
                <el-input v-model="changeBaseData.shopName" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--由门店自动带出 -->
              <el-form-item label="所属客户:" prop="clientName">
                <el-input v-model="changeBaseData.clientName" placeholder="——" disabled />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所属办事处:" prop="officeName">
                <el-input v-model="changeBaseData.officeName" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店类型:" prop="shopType">
                <c-dict-select
                  v-model="changeBaseData.shopType"
                  dict-type-code="SHOP_TYPE"
                  placeholder="请选择"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店业务类型:" prop="shopBizType">
                <el-select
                  v-model="changeBaseData.shopBizType"
                  multiple
                  disabled
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shopBizTypeOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店城市级别:" prop="shopCityLevel">
                <c-dict-select
                  v-model="changeBaseData.shopCityLevel"
                  dict-type-code="CITY_LEVEL"
                  placeholder="请选择"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店市场层级:" prop="shopMarketLevel">
                <c-dict-select
                  v-model="changeBaseData.shopMarketLevel"
                  dict-type-code="MARKET_LEVEL"
                  placeholder="请选择"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col v-if="showCustomer" :span="8">
              <el-form-item label="同门店客户经理:" prop="theSameCustomerMange">
                <el-select v-model="changeBaseData.theSameCustomerMange" placeholder="请选择">
                  <el-option
                    v-for="item in managerAccountOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <!-- <el-input v-model="changeBaseData.theSameCustomerMange" disabled placeholder="暂无客户经理" /> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店营业状态:" prop="businessStatus">
                <el-select
                  v-model="changeBaseData.businessStatus"
                  placeholder="——"
                  disabled
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in businessStateOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="门店详细地址:" prop="shopAddress">
                <el-input v-model="changeBaseData.shopAddress" type="textarea" disabled size="mini" placeholder="请输入" style="width:450px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="变更申请人:">
                {{ changeBaseData.applicantCode?changeBaseData.applicantCode: this.$store.getters.user.data.userName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="变更申请时间:">
                {{ changeBaseData.applicantTime? changeBaseData.applicantTime:nowTime() }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="变更说明:" prop="changeDesc">
                <el-input v-model="changeBaseData.changeDesc" type="textarea" show-word-limit maxlength="1000" size="mini" placeholder="请输入" style="width:450px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否重复设计:" prop="isRedesign">
                <el-radio-group v-model="changeBaseData.isRedesign">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-show="changeBaseData.isRedesign===1" :span="8">
              <!-- 当“是否重复设计”值为是时，此字段必填 -->
              <el-form-item label="重复设计原因:" prop="redesignReason">
                <c-dict-select
                  v-model="changeBaseData.redesignReason"
                  dict-type-code="REDESIGN_REASON"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="changeBaseData.isRedesign===1" :span="8">
              <el-form-item label="重复设计变更范围:" prop="changeRange">
                <el-checkbox-group
                  v-model="changeBaseData.changeRange"
                  style="display:inline-block"
                >
                  <el-checkbox
                    v-for="item in buildRangeOptions1"
                    :key="item.dictCode"
                    :label="item.dictCode"
                  >{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-row>
            <el-col :span="24">
              <el-form-item label="设计申请说明:">
                <el-input v-model="formDataConst.applyDesc" maxlength="1000" show-word-limit type="textarea" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
        <div class="qup-title-box"><span class="border" /><span>门店建设基础信息</span></div>
        <el-form
          ref="refConstForm"
          style="margin-top:20px"
          :rules="formConstRules"
          :model="formDataConst"
          size="mini"
          label-width="150px"
        >
          <el-row>
            <el-col :span="16">
              <el-form-item label="门店建设范围:" prop="decorationRange">
                <el-checkbox-group
                  v-model="formDataConst.decorationRange"
                  style="display:inline-block"
                >
                  <el-checkbox
                    v-for="item in buildRangeOptions"
                    :key="item.dictCode"
                    :label="item.dictCode"
                  >{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>
                <span style="color:#999;margin-left:10px">{{ '门头为临街独立门头，设计店中店外观（门楣）请选卖场' }}</span>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="装修形式:" prop="decorationForm">
                <el-select
                  v-model="formDataConst.decorationForm"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in decorationFormOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="报图类型:" prop="marketType">
                <c-dict-select
                  v-model="formDataConst.marketType"
                  dict-type-code="MARKET_TYPE"
                  :disabled="formDataConst.constructDataSource==='A'"
                  placeholder="请选择"
                  @change="changeMarketType"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店建设类型:" prop="constType">
                <el-select
                  v-model="formDataConst.constType"
                  placeholder="请选择"
                  :disabled="formDataConst.constructDataSource==='A'"
                >
                  <el-option
                    v-for="item in formDataConst.marketType==='NEW_MARKET'? constTypeOptions.slice(0,2): constTypeOptions.slice(2)"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商家类别:" prop="bizmanType">
                <c-dict-select
                  v-model="formDataConst.bizmanType"
                  dict-type-code="BIZMAN_TYPE"
                  :disabled="formDataConst.constructDataSource==='A'||formDataConst.marketType==='RECTIFY_MARKET'"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="门店档案面积:" prop="shopArea">
                  <el-input v-model.number="formDataConst.shopArea" disabled maxlength="4">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="测量卖场面积:" prop="surveyShopArea">
                  <el-input v-model.number="formDataConst.surveyShopArea" disabled maxlength="4">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="扩建面积:" prop="surveyExpansionArea">
                  <el-input v-model.number="formDataConst.surveyExpansionArea" disabled maxlength="4">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="翻新面积:" prop="surveyRefurbishArea">
                  <el-input v-model.number="formDataConst.surveyRefurbishArea" disabled maxlength="4">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否KA卖场:" prop="isKaMarket">
                <el-select v-model="formDataConst.isKaMarket" placeholder="请选择">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计进场装修时间:" prop="expectRenovationTime">
                <el-date-picker
                  v-model="formDataConst.expectRenovationTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计开业时间:" prop="expectOpenTime">
                <el-date-picker
                  v-model="formDataConst.expectOpenTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-show="formDataConst.decorationRange.includes('DOOR')">
          <div class="qup-title-box"><span class="border" /><span>门头设计申请信息</span></div>
          <el-form
            ref="refDoorForm"
            style="margin-top:20px"
            :rules="formDoorRules"
            :model="formDoorData"
            size="mini"
            label-width="150px"
          >
            <el-row>
              <!--门店类型为”独立店2“， 门头报图面积、门头模式、入口门类型、门头设计内容、是否需要门头效果图字段显示 -->
              <el-col :span="8">
                <el-form-item
                  :rules="[{required:formDataConst.decorationRange&&formDataConst.decorationRange.includes('DOOR'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="门头报图面积:"
                  prop="doorHeadPicArea"
                >
                  <el-input v-model.number="formDoorData.doorHeadPicArea" maxlength="4" placeholder="请填写面积">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <!-- 门店类型为“独立店，店中店”时显示，不必填 -->
              <!-- <el-col :span="8">
                <el-form-item label="门头模式:" prop="doorHeadMode">
                  <c-dict-select
                    v-model="formDoorData.doorHeadMode"
                    dict-type-code="DOOR_HEAD_MODE"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="入口门类型:" prop="entranceType">
                  <el-select
                    v-model="formDoorData.entranceType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in entranceTypeOptions"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="门头设计内容:" prop="doorHeadDesign">
                  <el-checkbox-group v-model="formDoorData.doorHeadDesign">
                    <el-checkbox
                      v-for="item in doorHeadsOptions"
                      :key="item.dictCode"
                      :label="item.dictCode"
                    >{{ item.dictName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否需要门头效果图:">
                  <el-select
                    v-model="formDoorData.isNeedRendering"
                    placeholder="请选择"
                  >
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div v-show="formDataConst.decorationRange.includes('STORES')">
          <div class="qup-title-box"><span class="border" /><span>卖场设计申请信息</span></div>
          <el-form
            ref="refStoreForm"
            style="margin-top:20px"
            :rules="formStoreRules"
            :model="formStoreData"
            size="mini"
            label-width="150px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="所在楼层:" prop="floors">
                  <el-input v-model="formStoreData.floors" maxlength="32">
                    <span slot="suffix">楼</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="可吊顶最低高度:" prop="ceilingMinHeight">
                  <el-input v-model="formStoreData.ceilingMinHeight" style="width:180px" type="number" disabled>
                    <span slot="suffix">米</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">定制产品：层高低于2.8M不予设计,
                    成品产品：层高低于2.5M不予设计</span>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="bread-box"><span>各区域建议报图面积</span></div>
            <el-row>
              <el-col :span="8">
                <el-form-item prop="newBusinessSuggestArea" label="新业务建议面积:">
                  {{ (formStoreData.newBusinessSuggestArea||0)+'㎡' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="softwareSuggestArea" label="软体建议面积:">
                  {{ (formStoreData.softwareSuggestArea||0)+'㎡' }}
                </el-form-item>
              </el-col> <el-col :span="8">
                <el-form-item prop="finishedProductSuggestArea" label="成品套房建议面积:">
                  {{ (formStoreData.finishedProductSuggestArea||0)+'㎡' }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item prop="publicSuggestArea" label="公共区建议面积:">
                  {{ (formStoreData.publicSuggestArea||0)+'㎡' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="miniSleepArea" label="微型睡眠区建议面积:">
                  {{ (formStoreData.miniSleepArea||0)+'㎡' }}
                </el-form-item>
              </el-col>
            </el-row>
            <div class="bread-box"><span>区域报图信息</span></div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="所选设计方案:" prop="selectedDesign">
                  <input-with-dialog
                    v-model="selectedDesign"
                    :props="{label:'programName',value:'programCode'}"
                    :config="dialogSelectedDesign"
                    @change="handleChangeDesign"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计申请业务类型:" prop="applyBizType">
                  <el-select
                    v-model="formStoreData.applyBizType"
                    multiple
                    disabled
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in applyBizTypeOptions"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 根据所选值，当选择对应区域时，对应区域面积字段必填； -->

                <el-form-item prop="applySpecialZone" label="设计申请区域:">
                  <div v-show="applyZoneOptions.length===0" style="color:#999">请先选择设计方案</div>
                  <div v-show="applyZoneOptions.length>0" style="color:#999">
                    1、多功能墙面家居：新店必上，翻新店面根据空间可利用性设计<br>
                    2、情景间：情景间为配合软体销售设计，必须设计软体才能同步设计情景间<br>
                    3、窗帘：新店必上，翻新店面根据空间可利用性设计<br>
                    4、整体橱柜：橱柜只能上样专区，专区至少5套橱柜<br>
                    5、木门：所有店面必上，800㎡以上店面上专区，800㎡以下店面可融入上样，不低于8扇
                  </div>
                  <el-checkbox-group
                    v-show="applyZoneOptions.length>0"
                    v-model="formStoreData.applySpecialZone"
                    @change="changeSpecialZone"
                  >
                    <!-- 多功能墙面不允许勾选。界面上仅作展示 Q017-->
                    <el-checkbox
                      v-for="item in applyZoneOptions"
                      :key="item.areaCode"
                      :disabled="!!item.isMustUp"
                      :label="item.areaCode"
                    >{{ item.areaName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q002')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q002'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="全屋定制面积:"
                  prop="wholeHouseCustomizedArea"
                >
                  <el-input v-model.number="formStoreData.wholeHouseCustomizedArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q014')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q014'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="软体面积:"
                  prop="softwareArea"
                >
                  <el-input v-model.number="formStoreData.softwareArea" maxlength="4" @input="accountSoftArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q015')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q015'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="套房面积:"
                  prop="suiteArea"
                >
                  <el-input v-model.number="formStoreData.suiteArea" maxlength="4" @input="accountSuitArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q004')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q004'),message:'请填写面积'},
                           { pattern:/^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="bathroomArea"
                  label="卫浴面积:"
                >
                  <el-input v-model.number="formStoreData.bathroomArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>

                </el-form-item>
              </el-col>

              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q005')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q005'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="sampleRoomArea"
                  label="样板间面积:"
                >
                  <el-input v-model.number="formStoreData.sampleRoomArea" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q003')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q003'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="wholeCabinetArea"
                  label="整体橱柜面积:"
                >
                  <el-input v-model.number="formStoreData.wholeCabinetArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q003')"> -->

            <!-- </el-row> -->
            <el-row v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q019')">
              <el-col :span="24">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q019'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="sceneArea"
                  label="情景间面积:"
                >
                  <el-input v-model.number="formStoreData.sceneArea" style="width:190px" maxlength="4" @input="accountSoftArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">情景间为配合软体销售设计，必须设计软体才能同步设计情景间</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006')">
              <el-col :span="24">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="publicSpaceArea"
                  label="公共区面积:"
                >

                  <el-input v-model.number="formStoreData.publicSpaceArea" style="width:190px" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">过道、设计会销区、前厅等，参考整店面积20%</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018')" :span="24">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="furnishArea"
                  label="装修主材区面积:"
                >
                  <div style="color:#999">1.根据预计上样的品类，提前预计主材区划分的大致面积<br>
                    2.目前以下品类有参考造型，如商家有其他主材上样需求，可单独沟通<br>
                    3.大面积主材区会对商家需要主营、多上样的品类扩大面积，请根据店面经营计划沟通需要主营的品类</div>
                  <el-input v-model.number="formStoreData.furnishArea" style="width:200px" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>

              <el-col :span="8">
                <el-form-item label="是否含换代特价区:" prop="isSpecialDistrict">
                  <el-radio-group v-model="formStoreData.isSpecialDistrict">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.isSpecialDistrict&&formStoreData.isSpecialDistrict===1" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.isSpecialDistrict&&formStoreData.isSpecialDistrict===1,message:'请填写面积'},
                           { pattern: /^([0-9]\d*)$/, message: '只能输入正整数' }]"
                  label="换代特价区面积:"
                  prop="specialDistrictArea"
                >
                  <el-input v-model.number="formStoreData.specialDistrictArea" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="卖场报图总面积:" prop="shopTotalArea">
                  <el-input v-model.number="formStoreData.shopTotalArea" style="width:180px" maxlength="4" placeholder="请填写面积">
                    <span slot="suffix">不小于{{ (formStoreData.suiteSumArea||0)+ (formStoreData.newBusinessAreaSummary||0)+(formStoreData.softwareSumArea||0) +(formStoreData.publicSumArea ||0) }}㎡</span>
                  </el-input>
                  <span v-show="(formStoreData.suiteSumArea||0)+ (formStoreData.newBusinessAreaSummary||0)+(formStoreData.softwareSumArea||0) +(formStoreData.publicSumArea ||0) > formDataConst.surveyShopArea" style="color:#E6A23C">您选择的区域汇总面积已大于测绘面积</span>
                  <span v-show="formStoreData.shopTotalArea> formDataConst.surveyShopArea" style="color:#E6A23C">&nbsp;&nbsp;您输入的卖场报图总面积已大于测绘面积</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <!-- 全屋定制+整体橱柜+卫浴+样板间面积 -->
                <el-form-item label="新业务面积汇总:">
                  <el-input v-model.number="formStoreData.newBusinessAreaSummary" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!-- 软体面积+情景间面积 -->
                <el-form-item label="软体区面积汇总:">
                  <el-input v-model.number="formStoreData.softwareSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="套房区面积汇总:">
                  <el-input v-model.number="formStoreData.suiteSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!-- 公共区+装修主材区面积 -->
                <el-form-item label="公共区面积汇总:">
                  <el-input v-model.number="formStoreData.publicSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 所选设计区域”值勾选了“公共区”时，展示此模块内容 -->
            <div v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006')">
              <div class="bread-box"><span>公共区设计内容</span></div>
              <!-- <el-row v-if="formStoreData.isDesignPublicSpace&&formStoreData.isDesignPublicSpace===1"> -->
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006'),message:'请选择'}]"
                    prop="publicSpaceContent"
                    label="公共空间设计内容:"
                  >
                    <el-checkbox-group v-model="formStoreData.publicSpaceContent">
                      <el-checkbox
                        v-for="item in publicSpaceOptions"
                        :key="item.dictCode"
                        :label="item.dictCode"
                      >{{ item.dictName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')" :span="8">
                  <el-form-item
                    prop="guideSysProgram"
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    label="导视系统设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.guideSysProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in guideSysOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('STAIRS')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('STAIRS')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    prop="stairsProgram"
                    label="楼梯设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.stairsProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in stairsOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('WC')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('WC')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    prop="toiletProgram"
                    label="卫生间设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.toiletProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in toiletOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('DESIGN_AREA')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('DESIGN_AREA')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="designerStationNum"
                    label="设计师工位数量:"
                  >
                    <el-input v-model.number="formStoreData.designerStationNum" maxlength="2" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col v-if="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('OFFICE')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('OFFICE')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="officeNum"
                    label="办公室设计数量:"
                  >
                    <el-input v-model.number="formStoreData.officeNum" maxlength="2" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col v-if="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('ELSE')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('ELSE')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="otherContent"
                    label="其他:"
                  >
                    <el-input v-model="formStoreData.otherContent" maxlength="1000" type="textarea" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <!-- v-show="formStoreData.isDesignPublicSpace&&formStoreData.isDesignPublicSpace===1" -->

            <!-- 所选设计区域”值勾选了“装修主材区”时，展示此模块内容，至少选择一个 -->
            <div v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018')">
              <div class="bread-box"><span>装修主材区设计内容</span></div>
              <el-row>
                <el-col :span="18">
                  <el-form-item
                    :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018'),message:'请选择'},]"
                    prop="furnishAreaContent"
                    label="装修主材区设计内容:"
                  >
                    <div style="color:#999">{{ '工艺展示需要高标准的施工要求，需由当地有制作工法展示经验的施工队进行深化施工，若无此类经验不建议选上' }}</div>
                    <el-checkbox-group v-model="formStoreData.furnishAreaContent">
                      <el-checkbox
                        v-for="item in furnishAreaOptions"
                        :key="item.dictCode"
                        :label="item.dictCode"
                      >{{ item.dictName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="qup-title-box"><span class="border" /><span>附件信息</span></div>
        <c-file-table-box v-model="files" :table-height="250" belong-model="SHOP_DESIGN_CHANGE" :model-id="changeId" />
      </div>

      <div class="btn-container">

        <el-button size="mini" type="primary" @click.native="handleCancel">取消</el-button>
        <el-button v-if="formDataConst.decorationRange&&formDataConst.decorationRange.includes('STORES')&&!showSubmitBtn" :loading="saveLoading" size="mini" type="primary" @click="next">下一步</el-button>

        <span v-else>
          <el-button
            v-if="showSubmit"
            :loading="saveLoading"
            size="mini"
            type="primary"
            @click="handleSubmit('1')"
          >提交</el-button>

          <el-button
            v-else
            :loading="saveLoading"
            size="mini"
            type="primary"
            @click="handleSubmit('2')"
          >提交审批</el-button>
        </span>

      </div>
    </div>
    <next
      v-if="activeStep===1"
      :id="id"
      :old-program-id="oldProgram"
      :const-code="activeConstCode"
      :change-id="changeId"
      :design-id="designId"
      :program-id="formStoreData.selectedDesignId"
      :customer-code="customerCode"
      :change-code="changeBaseData.changeCode"
      :shop-total-area="shopArea"
      :area-special-zone="areaSpecialZone"
      @changeStep="activeStep=0"
      @success="goBack"
    />
    <submit-dlg
      v-if="submitDlgVisible"
      ref="refDlg"
      :change-id="changeId"
      :submit-comfire-form="submitComfireForm"
      :visible.sync="submitDlgVisible"
      @success="goBack"
    />

  </div>
</template>
<script>
import submitDlg from '../submitDlg'
import { getWoleInfo } from '@/api/user'
import { getDetail, saveDesignChange, getChangeDesignInfo } from '@/api/shopDesignChange'
import { getDictByPatchType } from '@/api/dataDict'
import { nowTime } from '@/utils/tool.js'
import { queryAreaByProCode, areaRatio, getRatioConfigPage, getMapareaByShop, queryEnableArea } from '@/api/shopDesign'
import { searchManagerAccount, searchBizAccount } from '@/api/common'
import steps from '../../ShopDesign/components/steps'
import next from './next.vue'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'FromDesignChange',
  components: { steps, next, submitDlg },
  mixins: [BackPageMixin],
  data() {
    return {
      nowTime,
      modelId: '',
      id: '',
      oldProgram: '',
      showSubmitBtn: false, // 当设计区域不包括任何设计方案时，不显示下一步按钮
      shopArea: {},
      dialogSelectedDesign: {
        title: '设计方案',
        filtersRaw: [{ 'property': 'enable', 'value': '1', 'operator': '=', 'id': 'enable' }],
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configProgram/page`,
        setting: [{ prop: 'programName', width: 100, title: '方案名称' }, { prop: 'suitMinarea', width: 100, title: '适用最小面积(㎡)' },
          { prop: 'suitMaxarea', width: 100, title: '适用最大面积(㎡)' }, { width: 100, showOverflow: true, prop: 'specialAskRemark', title: '特殊备注' }]
      },
      changeNext: false,
      showSubmitAudit: false, // 显示审批提交按钮
      showSubmit: false, // 显示提交
      submitDlgVisible: false,
      showCustomer: false, // 是否显示同门店客户经理字段
      changeId: '', // 设计变更id
      activeConstCode: '',
      customerAccount: [],
      selectedDesign: [{ code: '', name: '' }], // 所选设计方案
      managerAccountOptions: [], // 同门店客户经理
      files: [],
      constCode: '', // 通过constCode获取门店建设基础数据
      activeStep: 0,
      customerCode: '',
      areaSpecialZone: [], // 设计申请区域数据
      constTypeOptions: [], // 建设类型
      furnishAreaOptions: [], // 装修主材区选择数据

      saveLoading: false,
      designId: '',
      dataLoading: false,
      publicSpaceContent: [],
      construction: [],
      steps: [{
        title: '基础信息变更填写',
        desc: ''
      },
      {
        title: '卖场设计区域及面积变更填写',
        desc: ''
      }],
      // 变更基础信息
      changeBaseData: {
        id: '',
        createBy: '',
        createTime: '',
        constCode: '', // 门店建设项目号
        shopCode: '', // 所属门店
        shopName: '',
        clientName: '', // 所属客户
        clientCode: '',
        changeCode: '', // 设计变更单号
        officeName: '', // 所属办事处
        shopType: '', // 门店类型
        shopBizType: [], // 门店业务类型
        changeRange: [], // 重复设计变更范围
        shopCityLevel: '', // 门店城市级别
        shopMarketLevel: '', // 门店市场层级
        shopAddress: '', // 门店详细地址
        businessStatus: '', // 门店营业状态
        theSameCustomerMange: '', // 同门客户经理
        applicantCode: '',
        applicantName: '',
        applicantTime: '',
        nowTime: '',
        changeDesc: '', // 变更说明
        isRedesign: 0, // 是否重复设计
        redesignReason: '', // 重复设计原因
        applyDesc: ''// 设计申请说明
      },
      // 门店建设基础信息
      formDataConst: {
        id: '',
        clientCode: '',
        shopArea: 0,
        surveyRefurbishArea: 0, // 翻新面积--门店档案面积
        surveyExpansionArea: 0, // 扩建面积--门店档案面积
        surveyShopArea: 0, // 测量卖场面积--门店档案面积
        constructDataSource: '',
        decorationRange: [], // 门店建设范围
        decorationForm: [], // 装修形式
        marketType: '', // 报图类型
        constType: '', // 建设类型
        bizmanType: '', // 商家类别
        isKaMarket: 1, // 是否KA卖场
        expectRenovationTime: '', // 预计进场装修时间
        expectOpenTime: '' // 预计开业时间
      },
      toiletOptions: [],
      buildRangeOptions1: [], // 设计范围变更
      guideSysOptions: [], // 导视系统设计方案
      stairsOptions: [], // 楼梯设计方案
      toiletProgram: [], // 卫生间设计方案
      buildRangeOptions: [], // 门店建设范围
      businessStateOptions: [], // 门店营业状态
      publicSpaceOptions: [], // 公共区域选择
      doorHeadsOptions: [], // 门头设计内容
      applyZoneOptions: [], // 申请区域下拉选择
      shopBizTypeOptions: [], // 门店业务类型
      decorationFormOptions: [], // 装修形式
      applyBizTypeOptions: [], // 申请业务类型
      entranceTypeOptions: [], // 入口门类型
      submitComfireForm: {}, // 确认更改提交表单
      submitId: '', // 提交更改获取更改信息的id
      // 门头设计申请信息
      formDoorData: {
        doorHeadPicArea: undefined, // 门头报图面积
        doorHeadMode: '', // 门头模式
        entranceType: '', // 入口门类型
        doorHeadDesign: [], // 门头设计内容
        isNeedRendering: 1 // 是否需要门头效果图
      },
      // 卖场设计申请信息
      formStoreData: {
        applyBizType: [], // 设计申请业务类型
        applySpecialZone: [], // 设计申请区域
        haveCurtain: undefined, // 是否含窗帘
        haveWallChange: 0, // 是否含墙变
        floors: '', // 所在楼层
        ceilingMinHeight: 0, // 可吊顶最低高度
        shopTotalArea: 0, // 卖场总面积
        wholeHouseCustomizedArea: undefined, // 全屋定制面积
        wholeCabinetArea: undefined, // 整体橱柜面积
        bathroomArea: undefined, // 卫浴面积
        sampleRoomArea: undefined, // 样板间面积
        isDesignPublicSpace: undefined, // 是否设计公共空间
        publicSpaceArea: undefined, // 公共区面积
        newBusinessAreaSummary: 0, // 新业务面积汇总
        finishedProductAreaSummary: 0, // 成品面积汇总
        guideSysProgram: '', // 导视系统设计方案
        // isSpecialDistrict: 0, // 是否含换代特价区
        // specialDistrictArea: undefined, // 换代特价区面积
        stairsProgram: '', // 楼梯设计方案
        toiletProgram: '', // 卫生间设计方案
        designerStationNum: 0, // 设计师工位数量
        officeNum: 0, // 办公室设计数量
        otherContent: '', // 其他说明
        publicSpaceContent: [], // 公共区域

        // 新增字段
        newBusinessSuggestArea: 0, // 新业务建议面积
        softwareSuggestArea: 0, // 软体建议面积
        finishedProductSuggestArea: 0, // 成品套房建议面积
        publicSuggestArea: 0, // 公共区建议面积
        miniSleepArea: 0, // 微型睡眠区建议面积
        selectedDesign: '', // 所选设计方案
        selectedDesignId: '', // 所选设计方案
        softwareArea: undefined, // 软体面积
        suiteArea: undefined, // 套房面积
        sceneArea: undefined, // 情景间面积
        furnishArea: undefined, // 装修主材区面积
        publicSumArea: 0, // 公共区面积汇总
        suiteSumArea: 0, // 套房区面积汇总
        furnishAreaContent: [] // 装修主材区设计内容
      },
      formRules: {
        redesignReason: [{ required: true, message: '请填写重复设计原因', trigger: 'change' }]
      },
      formConstRules: {
        decorationRange: [{ required: true, message: '请选择门店建设范围', trigger: 'change' }],
        decorationForm: [{ required: true, message: '请选择装修形式', trigger: 'change' }],
        marketType: [{ required: true, message: '请选择报图类型', trigger: 'change' }],
        constType: [{ required: true, message: '请选择门店建设类型', trigger: 'change' }],
        bizmanType: [{ required: true, message: '请选择商家类别', trigger: 'change' }],
        isKaMarket: [{ required: true, message: '请选择是否KA卖场', trigger: 'change' }],
        expectRenovationTime: [{ required: true, message: '请选择预计开业时间', trigger: 'change' }],
        expectOpenTime: [{ required: true, message: '请选择是否KA卖场', trigger: 'change' }]

      },
      formDoorRules: {
        doorHeadPicArea: [{ required: true, message: '请填写不为0的数字', trigger: 'change' }],
        entranceType: [
          { required: false, message: '请选择入口门类型', trigger: 'change' }
        ],
        doorHeadMode: [
          { required: false, message: '请选择门头模式', trigger: 'change' }
        ] },
      formStoreRules: {},
      formStoreRules1: {
        applyBizType: [{ required: false, message: '请选择设计申请业务类型', trigger: 'change' }],
        applySpecialZone: [{ required: true, message: '请选择设计申请区域', trigger: 'change' }],
        haveCurtain: [{ required: false, message: '请选择是否含窗帘', trigger: 'change' }],
        haveWallChange: [{ required: false, message: '请选择是否含墙变', trigger: 'change' }],
        floors: [{ required: true, message: '请填写所在楼层', trigger: 'change' }],
        ceilingMinHeight: [{ required: true, message: '请输入正确的最低吊顶高度', trigger: 'blur' }
          // { validator: validatePass, trigger: 'blur' }
        ],

        shopTotalArea: [
          { required: true, message: '请填写卖场总面积', trigger: 'change' },
          { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }
        ],
        selectedDesign: [
          { required: true, message: '请选择方案', trigger: 'change' }
        ],
        publicSpaceContent: [
          { required: false, message: '请选择公共空间设计内容', trigger: 'change' }
        ]
        // specialDistrictArea: [
        //   { required: false, message: '请填写换代特价区面积', trigger: 'change' },
        //   { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }
        // ],
        // isSpecialDistrict: [
        //   { required: true, message: '请选择是否含换代特价区', trigger: 'change' }
        // ]
      }

    }
  },
  watch: {
    'formDataConst.marketType'(v) {
      // 报图类型 当“报图类型”为“新开发市场NEW_MARKET”时，商家类别必填
      if (v === 'NEW_MARKET') this.formConstRules.bizmanType[0].required = true
      else this.formConstRules.bizmanType[0].required = false
    },
    'changeBaseData.isRedesign': {
      handler(v) {
        if (v === 1) {
          this.formRules.redesignReason[0].required = true
        } else {
          this.formRules.redesignReason[0].required = false
          this.changeBaseData.redesignReason = ''
          this.changeBaseData.changeRange = []
        }
      },
      deep: true,
      immediate: true
    },
    'formDataConst.decorationRange'(v) {
      if (v.length === 1 && v.includes('STORES')) {
        this.formStoreRules = this.formStoreRules1
        this.formDoorData.doorHeadPicArea = undefined
      } else if (v.length === 1 && v.includes('DOOR')) {
        this.formStoreRules = []
      } else if (v.length === 2) {
        this.formStoreRules = this.formStoreRules1
      }
    },

    // 'formStoreData.isSpecialDistrict'(v) {
    //   if (v === 1) this.formStoreRules1.specialDistrictArea[0].required = true
    //   else {
    //     this.formStoreData.specialDistrictArea = undefined
    //     this.formStoreRules1.specialDistrictArea[0].required = false
    //     this.accountSummaryArea()
    //     this.accountSoftArea()
    //     this.accountPublicSumArea()
    //     this.$forceUpdate()
    //   }
    // },
    'formStoreData.applySpecialZone'(v) {
      if (v && !v.includes('Q002')) this.formStoreData.wholeHouseCustomizedArea = undefined
      if (v && !v.includes('Q003')) this.formStoreData.wholeCabinetArea = undefined
      if (v && !v.includes('Q004')) this.formStoreData.bathroomArea = undefined
      if (v && !v.includes('Q005')) this.formStoreData.sampleRoomArea = undefined
      if (v && !v.includes('Q014')) this.formStoreData.softwareArea = undefined
      if (v && !v.includes('Q015')) this.formStoreData.suiteArea = undefined
      if (v && !v.includes('Q019')) this.formStoreData.sceneArea = undefined
      if (v && !v.includes('Q006')) this.formStoreData.publicSpaceArea = undefined
      if (v && !v.includes('Q018')) this.formStoreData.furnishArea = undefined
      this.accountSummaryArea()
      this.accountSoftArea()
      this.accountSuitArea()
      this.accountPublicSumArea()
      this.$forceUpdate()
    }
  },
  async  created() {
    this.id = this.$route.query.id
    // this.changeId = this.id
    this.changeId = this.$route.query.constCode ? this.id : ''// 从设计界面变更时 没有变更id
    this.getShowPermission()// 获取当前按钮权限
    this.constCode = this.$route.query.constCode
    this.constCode ? this.changeNext = true : this.changeNext = false// constCode存在时为编辑变更，否则为新增变更
    if (this.id) {
      if (this.constCode) {
        // 修改变更 id为变更id
        this.dataLoading = true
        getChangeDesignInfo(this.$route.query.id, this.constCode).then(res => {
          this.getConstData(res)
          this.dataLoading = false
        })
        getDetail(this.id).then(res => {
          if (res.success === 1 && res.data) {
            this.getBaseInfo(res)
            this.dataLoading = false
          }
        })
      } else {
        // 新增变更 id为设计id
        this.dataLoading = true
        getWoleInfo(this.id).then(res => {
          if (res.success === 1 && res.data) {
            this.getBaseInfo(res)
            this.getConstData(res)
            this.dataLoading = false
          }
        })
      }
    }

    this.getDictByPatchTypeAll()
  },
  methods: {
    changeMarketType(data) {
      if (data === 'RECTIFY_MARKET') this.formDataConst.bizmanType = 'OLD'
      this.formDataConst.constType = ''
    },
    getAreaSync(data) {
      if (!data) return
      // 根据门店获取测绘数据的 测量卖场面积，翻新面积，扩建面积
      //  surveyRefurbishArea // 翻新面积--门店档案面积
      // surveyExpansionArea // 扩建面积--门店档案面积
      // surveyShopArea // 测量卖场面积--门店档案面积
      getMapareaByShop(data).then(res => {
        if (res.success === 1) {
          const temp = res.data.records.filter(el => el.isValid)
          if (temp.length > 0) {
            this.formDataConst.surveyRefurbishArea = temp[0].surveyRefurbishArea || 0
            this.formDataConst.surveyExpansionArea = temp[0].surveyExpansionArea || 0
            this.formDataConst.surveyShopArea = temp[0].surveyShopArea || 0
            this.formStoreData.ceilingMinHeight = temp[0].ceilingMinHeight || 0
          } else {
            this.formDataConst.surveyRefurbishArea = 0
            this.formDataConst.surveyExpansionArea = 0
            this.formDataConst.surveyShopArea = 0
            this.formStoreData.ceilingMinHeight = 0
          }
        }
      })
    },
    isVerify() {
      return new Promise((resolve) => {
        if (this.activeStep === 1) {
          this.$confirm(` 此操作将放弃当前页面编辑结果，仅保存上一步设计变更基础信息后返回列表界面，是否继续？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            resolve()
          })
        } else {
          resolve()
        }
      })
    },
    // 所选设计方案
    handleChangeDesign(data) {
      this.formStoreData.applySpecialZone = []
      this.applyZoneOptions = []
      if (data.length > 0) {
        this.formStoreData.selectedDesignId = data[0].id
        this.formStoreData.selectedDesign = data[0].programName
        let list1 = []
        let list2 = []
        this.selectedDesign = [{ value: this.formStoreData.selectedDesignId, label: this.formStoreData.selectedDesign }]

        queryAreaByProCode(data[0].id).then(res => {
          if (res.success === 1 && res.data.records.length > 0) {
            list1 = res.data.records
            queryEnableArea().then(res => {
              if (res.success === 1) {
                list2 = res.data.records
                list1.forEach(v => {
                  list2.forEach(el => { if (v.areaCode === el.areaCode && v.areaCode !== 'Q106') this.applyZoneOptions.push(v) })
                })
                list1.forEach(v => {
                  if (v.isMustUp) this.formStoreData.applySpecialZone.push(v.areaCode)
                })

                this.changeSpecialZone(this.formStoreData.applySpecialZone)
              }
            })
          }
        })
      }
    },

    getDesignOptions(data) {
      if (!data) return
      this.applyZoneOptions = []
      let list1 = []
      let list2 = []

      queryAreaByProCode(data).then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          list1 = res.data.records
          queryEnableArea().then(res => {
            if (res.success === 1) {
              list2 = res.data.records
              list1.forEach(v => {
                list2.forEach(el => { if (v.areaCode === el.areaCode && v.areaCode !== 'Q106') this.applyZoneOptions.push(v) })
              })
              if (this.formStoreData.applySpecialZone.length === 0) {
                res.data.records.forEach(v => {
                  if (v.isMustUp) this.formStoreData.applySpecialZone.push(v.areaCode)
                })
              }
              this.changeSpecialZone(this.formStoreData.applySpecialZone)
            }
          })
        }
      })
    },
    // 获取区域占比情况
    getAreaRatio() {
      //  newBusinessSuggestArea: 0, // 新业务建议面积
      //   softwareSuggestArea: 0, // 软体建议面积
      //   finishedProductSuggestArea: 0, // 成品套房建议面积
      //   miniSleepArea: 0, // 微型睡眠区建议面积
      //   publicSuggestArea: 0, // 公共区建议面积
      getRatioConfigPage(this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea).then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          areaRatio(res.data.records[0].id).then(res => {
            if (res.success === 1 && res.data.records.length > 0) {
              res.data.records.forEach(v => {
                if (v.specialAreaType === 'A') this.formStoreData.newBusinessSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'B') this.formStoreData.softwareSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'C') this.formStoreData.finishedProductSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'D') this.formStoreData.miniSleepArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'E') this.formStoreData.publicSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
              })
            }
          })
        }
      })

      // this.newBusinessSuggestArea
    },
    getShowPermission() {
      if (!this.$route.query.type || this.$route.query.type === '2') { // 提交审批
        this.showCustomer = true
        this.showSubmitAudit = true
        this.showSubmit = false
      } else if (this.$route.query.type === '1') { // 不审批
        this.showCustomer = false
        this.showSubmitAudit = false
        this.showSubmit = true
      }
    },
    changeSpecialZone(data) {
      if (!data) return
      const tempArr = []
      if (data.includes('Q015') || data.includes('Q014')) tempArr.push('01')
      if (data.includes('Q002') || data.includes('Q019')) tempArr.push('02')
      if (data.includes('Q003')) tempArr.push('03')
      if (data.includes('Q004')) tempArr.push('04')
      if (data.includes('Q005')) tempArr.push('02', '03', '04')
      this.formStoreData.applyBizType = Array.from(new Set(tempArr))
      if (data.includes('Q002') || data.includes('Q003') || data.includes('Q004') || data.includes('Q005') || data.includes('Q014') || data.includes('Q015') || data.includes('Q019')) this.showSubmitBtn = false
      else this.showSubmitBtn = true
    },
    handleCloseSubmit() {
      this.submitDlgVisible = false
    },
    changeMinHeigh(data) {
      const num = Number(data)
      const tem = /^[1-9]\d*\,\d*|[1-9]\d*$/
      if (!tem.test(num)) {
        this.$message.warning('请输入正确的最低吊顶高度')
        return
      }
      this.formStoreData.ceilingMinHeight = Number(data)
    },
    validateDecoration() {
      if (!this.formDataConst.decorationRange.includes('DOOR')) {
        this.formDoorData = { doorHeadPicArea: undefined, // 门头报图面积
          doorHeadMode: '', // 门头模式
          entranceType: '', // 入口门类型
          doorHeadDesign: [], // 门头设计内容
          isNeedRendering: 1 // 是否需要门头效果图
        }
      }
      if (!this.formDataConst.decorationRange.includes('STORES')) {
        // 卖场设计申请信息
        this.formStoreData = {
          applyBizType: [], // 设计申请业务类型
          applySpecialZone: [], // 设计申请区域
          haveCurtain: undefined, // 是否含窗帘
          haveWallChange: undefined, // 是否含墙变
          floors: '', // 所在楼层
          ceilingMinHeight: 0, // 可吊顶最低高度
          shopTotalArea: 0, // 卖场总面积
          wholeHouseCustomizedArea: 0, // 全屋定制面积
          wholeCabinetArea: 0, // 整体橱柜面积
          bathroomArea: 0, // 卫浴面积
          sampleRoomArea: 0, // 样板间面积
          isDesignPublicSpace: 0, // 是否设计公共空间
          publicSpaceArea: 0, // 公共区面积
          newBusinessAreaSummary: 0, // 新业务面积汇总
          finishedProductAreaSummary: 0, // 成品面积汇总
          guideSysProgram: '', // 导视系统设计方案
          // isSpecialDistrict: undefined, // 是否含换代特价区
          // specialDistrictArea: 0, // 换代特价区面积
          stairsProgram: '', // 楼梯设计方案
          toiletProgram: '', // 卫生间设计方案
          designerStationNum: 0, // 设计师工位数量
          officeNum: 0, // 办公室设计数量
          otherContent: '', // 其他
          publicSpaceContent: [], // 公共区域

          // 新增字段
          newBusinessSuggestArea: 0, // 新业务建议面积
          softwareSuggestArea: 0, // 软体建议面积
          finishedProductSuggestArea: 0, // 成品套房建议面积
          publicSuggestArea: 0, // 公共区建议面积
          miniSleepArea: 0, // 微型睡眠区建议面积
          selectedDesign: '', // 所选设计方案
          selectedDesignId: '', // 所选设计方案
          softwareArea: 0, // 软体面积
          suiteArea: 0, // 套房面积
          sceneArea: 0, // 情景间面积
          furnishArea: 0, // 装修主材区面积
          publicSumArea: 0, // 公共区面积汇总
          furnishAreaContent: [] // 装修主材区设计内容
        }
      }
    },
    returnArray() {
      this.formDataConst.decorationForm = this.formDataConst.decorationForm && this.formDataConst.decorationForm.split(',') || []
      this.formDataConst.decorationRange = this.formDataConst.decorationRange && this.formDataConst.decorationRange.split(',') || []
      this.formDataConst.shopBizType = this.formDataConst.shopBizType && this.formDataConst.shopBizType.split(',') || []
      this.formStoreData.applySpecialZone = this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.split(',') || []
      this.formStoreData.applyBizType = this.formStoreData.applyBizType && this.formStoreData.applyBizType.split(',') || []
      this.formStoreData.publicSpaceContent = this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.split(',') || []
      this.changeBaseData.changeRange = this.changeBaseData.changeRange && this.changeBaseData.changeRange.split(',') || []

      // this.formStoreData.furnishAreaContent = this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.split(',') || []

      this.formDoorData.doorHeadDesign = this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.split(',') || []
      this.validateDecoration()
      this.$forceUpdate()
    },
    clearApplyArea(v) {
      if (!v.includes('Q002')) this.formStoreData.wholeHouseCustomizedArea = undefined
      if (!v.includes('Q003')) this.formStoreData.wholeCabinetArea = undefined
      if (!v.includes('Q004')) this.formStoreData.bathroomArea = undefined
      if (!v.includes('Q005')) this.formStoreData.sampleRoomArea = undefined
      if (!v.includes('Q014')) this.formStoreData.softwareArea = undefined
      if (!v.includes('Q015')) this.formStoreData.suiteArea = undefined
      if (!v.includes('Q019')) this.formStoreData.sceneArea = undefined
      if (!v.includes('Q006')) this.formStoreData.publicSpaceArea = undefined
      if (!v.includes('Q018')) this.formStoreData.furnishArea = undefined
    },
    handleCancel() {
      this.$confirm(`更改数据未保存,是否退出?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.goBack()
      })
    },
    getConstData(res) {
      // 门店基础信息
      const {
        constructDataSource, decorationRange, decorationForm, marketType, constType, clientCode,
        bizmanType, isKaMarket, expectRenovationTime, expectOpenTime, shopArea = 0, surveyShopArea = 0, surveyRefurbishArea = 0, surveyExpansionArea = 0
      } = res.data

      this.formDataConst = {
        constructDataSource, decorationRange, decorationForm, marketType, constType, clientCode,
        bizmanType, isKaMarket, expectRenovationTime, expectOpenTime, shopArea, surveyShopArea, surveyRefurbishArea, surveyExpansionArea
      }

      this.designId = res.data.id
      this.formDataConst.decorationForm = this.formDataConst.decorationForm && this.formDataConst.decorationForm.split(',') || []
      this.formDataConst.decorationRange = this.formDataConst.decorationRange && this.formDataConst.decorationRange.split(',') || []

      this.formDataConst.decorationRange.forEach(v => {
        this.buildRangeOptions1.push({ dictCode: v, dictName: v === 'DOOR' ? '门头' : '卖场' })
      })
      // 门头信息
      const { doorHeadPicArea, doorHeadMode, entranceType, doorHeadDesign, isNeedRendering } = res.data
      this.formDoorData = { doorHeadPicArea, doorHeadMode, entranceType, doorHeadDesign, isNeedRendering }
      this.formDoorData.doorHeadDesign = this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.split(',') || []

      // 卖场信息
      const {
        applyBizType, applySpecialZone, haveCurtain, haveWallChange, isSpecialDistrict, specialDistrictArea,
        floors = '', ceilingMinHeight, shopTotalArea = 0, wholeHouseCustomizedArea,
        wholeCabinetArea, bathroomArea, sampleRoomArea, isDesignPublicSpace, publicSpaceArea,
        newBusinessAreaSummary, finishedProductAreaSummary, guideSysProgram,
        stairsProgram, toiletProgram, designerStationNum, officeNum, otherContent, publicSpaceContent,
        newBusinessSuggestArea, softwareSuggestArea, finishedProductSuggestArea, publicSuggestArea, miniSleepArea,
        selectedDesign, selectedDesignId, softwareArea, suiteArea, sceneArea, suiteSumArea, furnishArea, publicSumArea, furnishAreaContent

      } = res.data
      this.formStoreData = {
        applyBizType, applySpecialZone, haveCurtain, haveWallChange,
        floors, ceilingMinHeight, shopTotalArea, wholeHouseCustomizedArea, specialDistrictArea,
        wholeCabinetArea, bathroomArea, sampleRoomArea, isDesignPublicSpace, publicSpaceArea,
        newBusinessAreaSummary, finishedProductAreaSummary, guideSysProgram, isSpecialDistrict,
        stairsProgram, toiletProgram, designerStationNum, officeNum, otherContent, publicSpaceContent,
        newBusinessSuggestArea, softwareSuggestArea, finishedProductSuggestArea, publicSuggestArea, miniSleepArea, selectedDesign, selectedDesignId,
        softwareArea, suiteArea, sceneArea, suiteSumArea, furnishArea, publicSumArea, furnishAreaContent

      }
      this.oldProgram = this.formStoreData.selectedDesignId
      this.selectedDesign = [{ value: this.formStoreData.selectedDesignId, label: this.formStoreData.selectedDesign }]
      this.getAreaRatio()
      this.getDesignOptions(this.formStoreData.selectedDesignId)
      this.formStoreData.furnishAreaContent = this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.split(',') || []
      this.formStoreData.publicSpaceContent = this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.split(',') || []
      this.formStoreData.applyBizType = this.formStoreData.applyBizType && this.formStoreData.applyBizType.split(',') || []
      this.formStoreData.applySpecialZone = this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.split(',') || []
    },
    getBaseInfo(res) {
      // 变更基础信息
      const {
        id, changeCode, changeRange, createTime, createBy, constCode, shopCode, shopName, clientName, clientCode, officeName, shopType, shopBizType, shopCityLevel, shopMarketLevel, shopAddress,
        businessStatus, theSameCustomerMange, applicantCode, applicantName, applicantTime, nowTime, changeDesc, isRedesign = 0, redesignReason, applyDesc
      } = res.data
      this.changeBaseData = {
        id, changeCode, changeRange, createTime, createBy, constCode, shopCode, shopName, clientName, clientCode, officeName, shopType, shopBizType, shopCityLevel, shopMarketLevel, shopAddress,
        businessStatus, theSameCustomerMange, applicantCode, applicantName, applicantTime, nowTime, changeDesc, isRedesign, redesignReason, applyDesc
      }
      this.changeBaseData.changeRange = this.changeBaseData.changeRange && this.changeBaseData.changeRange.split(',') || []
      this.changeBaseData.shopBizType = this.changeBaseData.shopBizType && this.changeBaseData.shopBizType.split(',') || []
      this.getAreaSync(this.changeBaseData.constCode)
      // 获取同门店客户经理
      if (this.changeBaseData.clientCode) {
        searchBizAccount(this.changeBaseData.clientCode, 'storechangerequestlist').then(response => {
          if (response.success === 1) {
            const account = response.data.records.map(element => element.code)
            searchManagerAccount(account.join(',')).then(res => {
              this.managerAccountOptions = res.data.records.filter(el => el.adAccount !== this.$store.getters.user.data.account)
            })
          }
        })
      }
    },

    // 新业务面积
    accountSummaryArea() {
      this.formStoreData.newBusinessAreaSummary = (this.formStoreData.wholeHouseCustomizedArea || 0) + (this.formStoreData.wholeCabinetArea || 0) +
      (this.formStoreData.bathroomArea || 0) + (this.formStoreData.sampleRoomArea || 0)
    },
    // 软体区面积汇总
    accountSoftArea() {
      this.formStoreData.softwareSumArea = (this.formStoreData.softwareArea || 0) + (this.formStoreData.sceneArea || 0)
    },
    // 套房区面积汇总
    accountSuitArea() {
      this.formStoreData.suiteSumArea = this.formStoreData.suiteArea || 0
    },
    // 公共区面积汇总
    accountPublicSumArea() {
      this.formStoreData.publicSumArea = (this.formStoreData.publicSpaceArea || 0) + (this.formStoreData.furnishArea || 0)
    },
    goBack() {
      this.$store.dispatch('views/goBack')
    },
    formatData() {
      this.formDataConst.decorationForm = this.formDataConst.decorationForm && this.formDataConst.decorationForm.toString() || ''
      this.formDataConst.decorationRange = this.formDataConst.decorationRange && this.formDataConst.decorationRange.toString() || ''
      this.formDataConst.shopBizType = this.formDataConst.shopBizType && this.formDataConst.shopBizType.toString() || ''
      this.formStoreData.applySpecialZone = this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.toString() || ''
      this.formStoreData.applyBizType = this.formStoreData.applyBizType && this.formStoreData.applyBizType.toString() || ''
      this.formStoreData.publicSpaceContent = this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.toString() || ''
      this.formStoreData.furnishAreaContent = this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.toString() || ''

      this.changeBaseData.changeRange = this.changeBaseData.changeRange && this.changeBaseData.changeRange.toString() || ''
      this.formDoorData.doorHeadDesign = this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.toString() || ''
      if (!this.formDataConst.decorationRange.includes('DOOR')) {
        this.formDoorData.doorHeadPicArea = undefined
        this.formDoorData.doorHeadMode = ''
        this.formDoorData.entranceType = ''
        this.formDoorData.doorHeadDesign = ''
        this.formDoorData.isNeedRendering = undefined
      }
      if (!this.formDataConst.decorationRange.includes('STORES')) {
        // 卖场设计申请信息
        this.selectedDesign = [{ code: '', name: '' }] // 所选设计方案
        this.formStoreData = {
          applyBizType: '', // 设计申请业务类型
          applySpecialZone: '', // 设计申请区域
          haveCurtain: undefined, // 是否含窗帘
          haveWallChange: undefined, // 是否含墙变
          floors: '', // 所在楼层
          ceilingMinHeight: undefined, // 可吊顶最低高度
          shopTotalArea: undefined, // 卖场总面积
          wholeHouseCustomizedArea: undefined, // 全屋定制面积
          wholeCabinetArea: undefined, // 整体橱柜面积
          bathroomArea: undefined, // 卫浴面积
          sampleRoomArea: undefined, // 样板间面积
          isDesignPublicSpace: undefined, // 是否设计公共空间
          publicSpaceArea: undefined, // 公共区面积
          newBusinessAreaSummary: undefined, // 新业务面积汇总
          finishedProductAreaSummary: undefined, // 成品面积汇总
          guideSysProgram: '', // 导视系统设计方案
          // isSpecialDistrict: undefined, // 是否含换代特价区
          // specialDistrictArea: undefined, // 换代特价区面积
          stairsProgram: '', // 楼梯设计方案
          toiletProgram: '', // 卫生间设计方案
          designerStationNum: undefined, // 设计师工位数量
          officeNum: undefined, // 办公室设计数量
          otherContent: '', // 其他
          publicSpaceContent: '', // 公共区域

          // 新增字段
          newBusinessSuggestArea: undefined, // 新业务建议面积
          softwareSuggestArea: undefined, // 软体建议面积
          finishedProductSuggestArea: undefined, // 成品套房建议面积
          publicSuggestArea: undefined, // 公共区建议面积
          miniSleepArea: undefined, // 微型睡眠区建议面积
          selectedDesign: '', // 所选设计方案
          selectedDesignId: '', // 所选设计方案
          softwareArea: undefined, // 软体面积
          suiteArea: undefined, // 套房面积
          sceneArea: undefined, // 情景间面积
          furnishArea: undefined, // 装修主材区面积
          publicSumArea: undefined, // 公共区面积汇总
          furnishAreaContent: '' // 装修主材区设计内容
        }
      }
    },
    clearIsPublic() {
      if (!this.formStoreData.applySpecialZone.includes('Q018')) {
        this.formStoreData.furnishAreaContent = ''
      }
      if (!this.formStoreData.applySpecialZone || !this.formStoreData.applySpecialZone.includes('Q006')) {
        this.formStoreData.guideSysProgram = ''// 导视系统设计方案
        this.formStoreData.stairsProgram = '' // 楼梯设计方案
        this.formStoreData.toiletProgram = ''// 卫生间设计方案
        this.formStoreData.designerStationNum = 0// 设计师工位数量
        this.formStoreData.officeNum = 0// 办公室设计数量
        this.formStoreData.otherContent = ''// 其他
        this.formStoreData.publicSpaceContent = ''// 公共区域
      } else {
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')) this.formStoreData.guideSysProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('STAIRS')) this.formStoreData.stairsProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('WC')) this.formStoreData.toiletProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('DESIGN_AREA')) this.formStoreData.designerStationNum = 0
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('OFFICE')) this.formStoreData.officeNum = 0
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('ELSE')) this.formStoreData.otherContent = ''
      }
    },
    async   next() {
      const pass1 = await this.$refs['refForm'].validate()
      const pass2 = await this.$refs['refConstForm'].validate()
      const pass3 = await this.$refs['refStoreForm'].validate()
      const pass4 = await this.$refs['refDoorForm'].validate()
      // return
      if (pass1 && pass2 && pass3 && pass4) {
        if (this.formStoreData.shopTotalArea < (this.formStoreData.newBusinessAreaSummary || 0) + (this.formStoreData.softwareSumArea || 0) + (this.formStoreData.suiteArea || 0) + (this.formStoreData.publicSumArea || 0)) {
          this.$message.warning('卖场总面积小于区域面积之和，请重新填写')
          return
        }
        const newFileList = []
        this.files.forEach(el => {
          newFileList.push(el.response.data)
        })
        const tempArr = newFileList.filter(el => !el.configAttachmentId)
        if (tempArr.length > 0) {
          this.$message.warning('请完善文件类型选择')
          return
        }
        this.saveLoading = true
        this.clearIsPublic()
        this.areaSpecialZone = this.formStoreData.applySpecialZone
        this.formatData()
        // this.formStoreData.applySpecialZone && this.clearApplyArea(this.formStoreData.applySpecialZone)
        // if (!this.formDataConst.decorationRange || !this.formDataConst.decorationRange.includes('DOOR')) this.formDoorData = {}
        // if (!this.formDataConst.decorationRange || !this.formDataConst.decorationRange.includes('STORES')) this.formStoreData = {}
        if (!this.changeNext) delete this.changeBaseData.id // constCode不存在时，说明新增变更，不传id
        const formData = { ...this.changeBaseData, ...this.formDataConst, ...this.formDoorData, ...this.formStoreData }

        this.$set(formData, 'shopAttachmentDTOList', newFileList)
        const data = { ...formData, ...{
          wholeHouseCustomizedArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q002') ? this.formStoreData.wholeHouseCustomizedArea : 0,
          wholeCabinetArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q003') ? this.formStoreData.wholeCabinetArea : 0,
          bathroomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q004') ? this.formStoreData.bathroomArea : 0,
          sampleRoomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q005') ? this.formStoreData.sampleRoomArea : 0,
          softwareArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q014') ? this.formStoreData.softwareArea : 0,
          suiteArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q015') ? this.formStoreData.suiteArea : 0,
          sceneArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q019') ? this.formStoreData.sceneArea : 0,
          publicSpaceArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q006') ? this.formStoreData.publicSpaceArea : 0,
          furnishArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q018') ? this.formStoreData.furnishArea : 0,
          // specialDistrictArea: this.formStoreData.isSpecialDistrict === 1 ? this.formStoreData.specialDistrictArea : 0,
          doorHeadPicArea: this.formDataConst.decorationRange && this.formDataConst.decorationRange.includes('DOOR') ? this.formDoorData.doorHeadPicArea : 0
        }}
        saveDesignChange(data, 0).then((res) => {
          if (res.success === 1) {
            this.saveLoading = false
            this.activeStep = 1
            // 请求成功后
            this.returnArray()
            this.$message({ message: '操作成功', type: 'success' })
            this.shopArea = {
              softwareArea: formData.softwareArea || 0,
              suiteArea: formData.suiteArea || 0,
              sceneArea: formData.sceneArea || 0,
              bathroomArea: formData.bathroomArea || 0,
              sampleRoomArea: formData.sampleRoomArea || 0,
              wholeHouseCustomizedArea: formData.wholeHouseCustomizedArea || 0,
              wholeCabinetArea: formData.wholeCabinetArea || 0
            }
            this.changeId = res.msg//
            this.id = res.msg
            this.changeNext = true
            this.$set(this.changeBaseData, 'id', res.msg)
            this.activeConstCode = this.changeBaseData.constCode
            this.customerCode = this.changeBaseData.clientCode
          }
        }).catch(() => {
          this.saveLoading = false
        })
      } else {
        this.$message.warning('请完善表单信息')
      }
    },
    // 提交数据 ，触发bpm
    async   handleSubmit(flag) {
      const pass1 = await this.$refs['refForm'].validate()
      const pass2 = await this.$refs['refConstForm'].validate()
      let pass3 = true
      let pass4 = true
      if (this.formDataConst.decorationRange.includes('DOOR')) pass3 = await this.$refs['refDoorForm'].validate()
      if (this.showSubmitBtn && this.formDataConst.decorationRange.includes('STORES')) pass4 = await this.$refs['refStoreForm'].validate()
      if (pass1 && pass2 && pass3 && pass4) {
        if (this.formStoreData.shopTotalArea < (this.formStoreData.newBusinessAreaSummary || 0) + (this.formStoreData.softwareSumArea || 0) + (this.formStoreData.suiteArea || 0) + (this.formStoreData.publicSumArea || 0)) {
          this.$message.warning('卖场总面积小于区域面积之和，请重新填写')
          return
        }
        this.clearIsPublic()
        this.formatData()
        const newFileList = []
        this.files.forEach(el => {
          newFileList.push(el.response.data)
        })
        const tempArr = newFileList.filter(el => !el.configAttachmentId)
        if (tempArr.length > 0) {
          this.$message.warning('请完善文件类型选择')
          return
        }
        const formData = { ...this.formStoreData, ...this.changeBaseData, ...this.formDataConst, ...this.formDoorData, ...{ shopAttachmentDTOList: newFileList }}
        //  保存设计变更
        if (!this.changeNext) delete formData.id // constCode不存在时，说明新增变更，不传id
        this.saveLoading = true
        this.dataLoading = true
        const data = { ...formData, ...{
          wholeHouseCustomizedArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q002') ? this.formStoreData.wholeHouseCustomizedArea : 0,
          wholeCabinetArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q003') ? this.formStoreData.wholeCabinetArea : 0,
          bathroomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q004') ? this.formStoreData.bathroomArea : 0,
          sampleRoomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q005') ? this.formStoreData.sampleRoomArea : 0,
          softwareArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q014') ? this.formStoreData.softwareArea : 0,
          suiteArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q015') ? this.formStoreData.suiteArea : 0,
          sceneArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q019') ? this.formStoreData.sceneArea : 0,
          publicSpaceArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q006') ? this.formStoreData.publicSpaceArea : 0,
          furnishArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q018') ? this.formStoreData.furnishArea : 0,
          // specialDistrictArea: this.formStoreData.isSpecialDistrict === 1 ? this.formStoreData.specialDistrictArea : 0,
          doorHeadPicArea: this.formDataConst.decorationRange && this.formDataConst.decorationRange.includes('DOOR') ? this.formDoorData.doorHeadPicArea : 0
        }}
        await saveDesignChange(data, 1).then((res) => {
          if (res.success === 1) {
            this.saveLoading = false
            // 请求成功后
            this.returnArray()
            this.changeId = res.msg
            this.submitDlgVisible = true
            this.dataLoading = false
            this.$message.success(`保存成功`)
            return
          }
        }).catch(() => {
          this.returnArray()
          this.saveLoading = false
          this.dataLoading = false
        })
        // 显示确认单
        this.submitComfireForm = formData
        this.$set(this.submitComfireForm, 'id', this.changeId)
        this.$set(this.submitComfireForm, 'type', flag)
      } else {
        this.$message.warning('请完善表单信息')
      }
    },
    async getDictByPatchTypeAll() {
      const { MATERIAL_AREA, CONST_TYPE, ENTRANCE_TYPE, DECORATION_FORM, BIZ_TYPE, SHOP_BIZ_STATE, DOOR_HEAD_DESIGN, GUIDE_SYS_PROGRAM, STAIRS_PROGRAM, TOILET_PROGRAM, DECORATION_RANGE, PUBLIC_SPACE_CONTENT } =
      await getDictByPatchType(['MATERIAL_AREA', 'CONST_TYPE', 'ENTRANCE_TYPE', 'DECORATION_FORM', 'BIZ_TYPE', 'SHOP_BIZ_STATE', 'DOOR_HEAD_DESIGN', 'GUIDE_SYS_PROGRAM', 'STAIRS_PROGRAM', 'TOILET_PROGRAM', 'DECORATION_RANGE', 'PUBLIC_SPACE_CONTENT'])
      this.doorHeadsOptions = DOOR_HEAD_DESIGN
      this.guideSysOptions = GUIDE_SYS_PROGRAM
      this.stairsOptions = STAIRS_PROGRAM
      this.toiletOptions = TOILET_PROGRAM
      this.buildRangeOptions = DECORATION_RANGE
      this.businessStateOptions = SHOP_BIZ_STATE// 门店营业状态
      this.publicSpaceOptions = PUBLIC_SPACE_CONTENT
      this.shopBizTypeOptions = BIZ_TYPE
      this.decorationFormOptions = DECORATION_FORM
      this.applyBizTypeOptions = BIZ_TYPE
      this.entranceTypeOptions = ENTRANCE_TYPE
      this.constTypeOptions = CONST_TYPE
      this.furnishAreaOptions = MATERIAL_AREA
    }

  }

}
</script>
<style lang="scss" scoped>
/deep/.table-list-box .el-table--border{
  min-height: 200px;
}
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .btn-container{
    width: 300px;
    margin: auto;
}
</style>
